<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script>
        $(function(){
            $("form").on('submit', function (e) {
                e.preventDefault();
            });
            $( "#connect" ).click(function() { connect(); });
           $( "#disconnect" ).click(function() { disconnect(); });
        });

        function connect() {
            $.get('/task/count/2', function (data) {
                console.log('/task/count/2 ' + data);
                getProgess()
            })
        }
        var tid = null;
        var t = 0;
        var getProgess = function () {
            var n = t;
            $.get('/task/progress/' + n, function (data) {
                console.log('/task/progress/' + data);
                $('.progress-bar').css('width', data+'%').attr('aria-valuenow', data);
                $('.progress-text').html('' + data+'%')//.attr('aria-valuenow', data);
                t++;
                console.log('t=' + t);
                if(data < 100){
                    tid = setTimeout(getProgess, 500);
                }else{
                    clearTimeout(tid);
                    console.log('done')
                }
            })
        }

        function disconnect(){
            clearTimeout(tid);
        }
    </script>
</head>
<body>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">Test Progess:</label>
                    <button id="connect" class="btn btn-default" type="submit">Start</button>
                    <button id="disconnect" class="btn btn-default" type="submit">Pause
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <!--<div>完成20个/全部200个 </div>-->
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60"
                 aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                <span class="progress-text"></span>
            </div>
        </div>
    </div>
</div>
</body>
</html>
